<template>
  <div class='container'>
    <el-dialog :visible='showVisible' @close='closeDialog' @open="openDialog">
       <template slot="title">
          <span v-if="formData.id" style="color:#fff">修改标签</span>
          <span v-else style="color:#fff">新增标签</span>
        </template>
      <!-- el-dialog里面包含两个插槽，一个是匿名的放'表单'，一个是具名的footer放'按钮' -->
      <template #default>
          <el-form ref="addForm" :model="formData" :rules="rules" label-width="80px">
            <el-form-item label="所属学科" prop="subjectID">
                <el-select v-model="formData.subjectID" style="width:50%" placeholder="请选择">
                    <el-option v-for="item in subjectsList" :key="item.id" :value="item.id" :label="item.subjectName"></el-option>
                </el-select>
            </el-form-item>
            <el-form-item v-if="isShow" label="标签名称" prop="tagName">
                <el-input v-model="formData.tagName" style="width:50%" placeholder="请输入" />
            </el-form-item>
        </el-form>
      </template>
      <template #footer>
          <el-button @click.native="closeDialog">取消</el-button>
          <el-button type="primary" @click.native="addBtn">确定</el-button>
      </template>
  </el-dialog>
  </div>
</template>

<script>
import {list} from '@/api/hmmm/subjects'
import {add,update,detail} from '@/api/hmmm/tags'
// import {subjectsTrans} from '@/utils/subjectsTrans'
export default {
  props:{
    showVisible:{
      type:Boolean
    },
    fromSubjectId:{
      type:Number
    }
  },
  data(){
    return {
      formData:{
        id:'',
        subjectID:'',
        tagName:''
      },
      rules:{
        subjectID:[
          //  { required: true, message: '请选择所属学科', trigger: ['blur', 'change'] }
        ],
        tagName:[
           { required: true, message: '请输入标签名称', trigger: ['blur', 'change'] }
        ]
      },
      subjectForm:{
        id:'',
        subjectID:'',
        tagName:''
      },
      subjectRules:{
        tagName:[ { required: true, message: '请输入标签名称', trigger: ['blur', 'change'] }]
      },
      subjectsList:[],
      isShow:true,
      title:''
    }
  },
  methods: {
    closeDialog(){
      this.$emit('close-dialog')
      this.$refs.addForm.resetFields()
    },
    // 打开窗口渲染学科列表
    async openDialog(){
      const {data} = await list()
      // console.log(data.items)
      this.subjectsList=data.items
      if(this.fromSubjectId){
        this.isShow=false
      }else{
        this.isShow=true
      }
    },
    // 点击确定添加
    addBtn(){
      this.$refs.addForm.validate(async valid=>{
        if(!valid) return
        if(this.formData.id){
          await update(this.formData)
        }else{
          await add(this.formData)
        }
        this.$message.success(`${this.formData.id?'修改成功':'新增成功'}`)
        this.closeDialog()
        // 刷新列表
        this.$emit('add-tags')
      })
    },
    // 修改标签
    async detailTags(id){
      const {data} = await detail({id:id})
        this.formData=data
    }
  },
}
</script>

<style scoped lang='less'></style>
